<script lang="ts">
import { ref, reactive, defineComponent, onMounted } from "vue";
import { ElMessage, FormInstance, FormRules } from "element-plus";
import { consult } from '@/network/Userapi'
import { useRouter } from "vue-router";
import resizeRank from '@/util/screen'

export default defineComponent({
  name: "contact-modal",
  title: "contact modal",
  props: {
    modalPruduct: {
      type: Object,
    },
  },
  setup(props: any) {
    let data = reactive({
      dialogVisible: false,
      form: {
        firstName: "",
        email: "",
        lastName: "",
        region: "",
        company: "",
        message: "",
      },
    });
    const modalPruduct = ref() as any
    modalPruduct.value = props.modalPruduct
    const router = useRouter()
    const handleOpen = () => {
      data.dialogVisible = true;
    };
    const rules = reactive<FormRules>({
      email: [
        {
          required: true,
          message: "Please enter your email address",
          trigger: "blur",
        },
        {
          type: "email",
          message: "Please enter the correct email address",
          trigger: "blur",
        },
      ],
      message: [
        { required: true, message: "Please enter a message", trigger: "blur" },
      ],
    });

    const resetForm = (formEl: FormInstance | undefined) => {
      if (!formEl) return;
      formEl.resetFields();
      data.dialogVisible = false;
    };
    const formRef = ref<FormInstance>();
    const submit = async (formEl: FormInstance | undefined) => {
      if (!formEl) return;
      await formEl.validate((valid) => {
        if (valid) {
          const params = reactive({
            user_id: window.localStorage.getItem('id'),
            email: data.form.email,
            first_name: data.form.firstName,
            last_name: data.form.lastName,
            company_name: data.form.company,
            content: data.form.message,
            form: props.modalPruduct.name ? props.modalPruduct.name : router.currentRoute.value.name
          })
          consult(params).then(res => {
            if (res.code == 1) {
              data.dialogVisible = false
              ElMessage({
                message: 'Successful contact',
                type: 'success'
              })
            }
          })
        }
      })
    }
    const rank = ref(0) /* 1为手机端 */
    onMounted(() => {
      /**
       * @methods 判定pc&movie
       */
      rank.value = resizeRank(rank.value)
      window.addEventListener('resize', () => {
        let screenWidth = document.body.clientWidth
        if (screenWidth < 768) {
          rank.value = 1
        } else {
          rank.value = 0
        }
      })
    })
    return {
      data,
      handleOpen,
      rules,
      resetForm,
      formRef,
      submit,
      modalPruduct,
      rank,
    };
  },
});
</script>
<template>
  <div class="contactModal">
    <el-dialog v-model="data.dialogVisible" title="联系我们" class="bigTitle" v-if="rank == 0">
      <div v-show="modalPruduct?.name" class="productList">
        <el-row class="productItem">
          <el-col :xs="24" :sm="24" :md="20" :lg="20" :xl="20" class="info">
            <div class="image">
              <img :src="modalPruduct?.cover_image" alt="" />
            </div>
            <div class="text">
              <div v-show="modalPruduct?.descr" class="route">
                {{ modalPruduct?.descr }}
              </div>
              <div class="name">{{ modalPruduct?.name }}</div>
            </div>
          </el-col>
        </el-row>
      </div>
      <el-form ref="formRef" :model="data.form" :rules="rules">
        <el-form-item prop="email">
          <el-input v-model="data.form.email" placeholder="Your email" autocomplete="off" />
        </el-form-item>
        <el-row>
          <el-col :span="11">
            <el-form-item prop="firstName">
              <el-input v-model="data.form.firstName" placeholder="First name" autocomplete="off" />
            </el-form-item>
          </el-col>
          <el-col :offset="2" :span="11">
            <el-form-item prop="lastName">
              <el-input v-model="data.form.lastName" placeholder="Last name" autocomplete="off" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item prop="company">
          <el-input v-model="data.form.company" placeholder="Company name" autocomplete="off" />
        </el-form-item>
        <el-form-item prop="message">
          <el-input v-model="data.form.message" :rows="8" type="textarea" placeholder="Leave your message" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button class="btnStyle" type="info" color="#DADADD" @click="resetForm(formRef)">Cancel</el-button>
          <el-button class="btnStyle foor_btn" type="primary" @click="submit(formRef)">Submit</el-button>
        </div>
      </template>
    </el-dialog>
    <el-drawer v-model="data.dialogVisible" direction="btt" size="80%" title="联系我们" v-else>
      <div v-show="modalPruduct?.name" class="productList">
        <el-row class="productItem">
          <el-col :xs="24" :sm="24" :md="20" :lg="20" :xl="20" class="info">
            <div class="image">
              <img :src="modalPruduct?.cover_image" alt="" />
            </div>
            <div class="text">
              <div v-show="modalPruduct?.descr" class="route">
                {{ modalPruduct?.descr }}
              </div>
              <div class="name">{{ modalPruduct?.name }}</div>
            </div>
          </el-col>
        </el-row>
      </div>
      <el-form ref="formRef" :model="data.form" :rules="rules">
        <el-form-item prop="email">
          <el-input v-model="data.form.email" placeholder="Your email" autocomplete="off" />
        </el-form-item>
        <el-row>
          <el-col :span="11">
            <el-form-item prop="firstName">
              <el-input v-model="data.form.firstName" placeholder="First name" autocomplete="off" />
            </el-form-item>
          </el-col>
          <el-col :offset="2" :span="11">
            <el-form-item prop="lastName">
              <el-input v-model="data.form.lastName" placeholder="Last name" autocomplete="off" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item prop="company">
          <el-input v-model="data.form.company" placeholder="Company name" autocomplete="off" />
        </el-form-item>
        <el-form-item prop="message">
          <el-input v-model="data.form.message" :rows="8" type="textarea" placeholder="Leave your message" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button class="btnStyle" type="info" color="#DADADD" @click="resetForm(formRef)">Cancel</el-button>
          <el-button class="btnStyle foor_btn" type="primary" @click="submit(formRef)">Submit</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>


<style lang="scss" scoped>
.contactModal {

  .productList {
    width: 100%;
    margin-bottom: 20px;

    .productItem {
      padding: 20px 0;
      display: flex;
      justify-content: space-between;

      .info {
        display: flex;

        .image {
          width: 111px;
          height: 80px;
          border-radius: 10px;
          border: 1px solid #dadadd;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            padding: 5px 20px;
          }
        }

        .text {
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          margin-left: 20px;
          font-size: $text;

          .route {
            color: $auxiliaryColor2;
            margin-bottom: 20px;
          }

          .name {
            font-size: $userText;
            color: $auxiliaryColor;
            font-weight: bold;
          }

          .src {
            color: $mainColor;
          }
        }
      }
    }

    .productItem:hover {
      .collect {
        .el_bun {
          opacity: 1;
          transition: all 0.21s;
        }
      }
    }
  }

  :deep(.el-input) {
    height: 50px;
  }

  .foor_btn {
    margin-left: 30px;
  }

  :deep(.el-input__wrapper),
  :deep(.el-textarea__inner) {
    border-radius: 0px;
  }

  :deep(.el-input__inner::placeholder),
  :deep(.el-textarea__inner::placeholder) {
    color: #6e6e73ff;
    font-size: 18px;
  }

  :deep(.el-dialog) {
    border-radius: 15px;
    width: 50%;
  }

  :deep(.el-dialog__footer) {
    text-align: center;
    margin-top: -20px;
    height: 90px;
  }

  :deep(.el-dialog__body) {
    margin: 0 50px;
  }

  :deep(.el-dialog__header) {
    margin: 0 50px;
    padding-top: 50px;
  }

  :deep(.el-button) {
    height: 40px;
    width: 150px;
    border-radius: 26px;
  }

  :deep(.el-dialog__title) {
    font-size: 40px;
    color: #1d1d1f;
    font-family: alibabapuhuitiBold;
  }

  :deep(.el-dialog__headerbtn .el-dialog__close) {
    font-size: 20px;
  }
}

.dialog-footer{
  display: flex;
  justify-content: center;
}

@media screen and (max-width: 768px) {
  .contactModal {
    .wishlist .productList .productItem .info .image img {
      padding: 5px;
    }

    :deep(.el-dialog) {
      border-radius: 8px;
      width: 96%;
    }

    :deep(.el-dialog__body) {
      margin: 0 0px;
    }

    :deep(.el-dialog__header) {
      margin: 0 0px;
      padding-top: 20px;
    }
  }

  :deep(.el-dialog__title) {
    font-size: 24px !important;
    color: #1d1d1f;
    font-family: alibabapuhuitiBold;
  }

  .contactModal .productList .productItem .info .text .name {
    font-size: 24px !important;
  }

  :deep(.el-dialog__body) {
    padding: 0 20px;
  }

  .productItem {
    padding: 0px 0 !important;
  }

  :deep(.el-drawer__header) {
    margin-top: 20px;
    margin-bottom: 20px !important;
  }
}
</style>
